<template>
    <div class="talkToUs">
        <div class="talk_input">
                 <h1>给我们留言</h1>
                 <div class="talk_user">
                     <div class="talk_user_div">用户名</div>
                     <div class="talk_user_input">{{username1}}</div>
                 </div>
                 <textarea name="talkToUs" id="talkToUs_input" cols="30" rows="10" placeholder="请填入留言信息..." v-model="talkTous"></textarea>
                 <button @click="submit_text">提交</button>
                 
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return {
            talkTous:''
        }
    },
    methods:{
           sendContent:function(){
                  axios.post('/talkToUs',{
                      content:this.talkTous,
                      user : this.username1
                  }).then( (res) => {
                      var msg = res.data.msg
                      alert(msg);
                  })
           },
           submit_text:function(){
                 var checkContent = /~<>/ig;
                 var checkContent2 = checkContent.test(this.talkTous);
                     if(this.username1 == ''){
                         this.$router.push({
                             path:'/login'
                         })
                     }else if(this.talkTous == ''){
                         alert('请输入留言信息。')
                         return
                     }
                     else if(checkContent2){
                         alert('留言内不能含有特殊字符！');
                         return
                     }else{
                            this.sendContent();
                     }
           }
    },
	computed:{
			 username1() {
				  return this.$store.state.username1
			 }
		}
}
</script>

<style>
.talkToUs{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background-image: url(../../../static/img/81005183827.jpg);
    background-position: center;
    background-size: cover;
}

.talk_input{
    margin-top: 80px;
    width: 40%;
    height: 500px;
    border:1px dotted rgba(80, 133, 143, 0.692);
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items:center ;
    flex-direction: column;
    background: rgba(97, 145, 155, 0.808);
    margin-bottom: 80px;
}
.talk_input h1{
    margin-top: 50px;
    text-align: center;
    color: white;
    font-size: 30px;
    font-weight: bold;
    font-family: 'SimHei';
}

.talk_input textarea{
    min-width: 60%;
    min-height: 200px;
    max-width: 60%;
    border-radius: 10px;
    max-height: 200px;
    font-size: 15px;
    font-family: 'SimHei'
}
.talk_input button{
    width: 60%;
    height: 40px;
    color: white;
    background: #79ca8e;
    border-radius: 10px;
    border: none;
    outline: rgb(53, 100, 77);
    cursor: pointer;


}
.talk_user{
    border: 1px solid rgba(80, 133, 143, 0.692);
    border-radius: 10px;
    width: 60%;
    height: 30px;
    background: white;
    display: flex;
    justify-items: start;
    align-items: center;
    font-size: 20px;
    font-family: 'SimHei';

}
.talk_user_div{
    color: rgb(77, 75, 75);
    background: #333;
    color: white;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    border-right: 1px solid rgba(80, 133, 143, 0.692);
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    font-family: 'SimHei';
}
.talk_user_input{
    width: 200px;
    height: 30px;
    line-height: 30px;
    color: #333;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    font-family:'Arial', 'SimHei';
}
</style>

